<template>
  <div class="region-panel-temp">
    <el-button-group class="checkbox">
      <el-button
        size="small"
        @click="regiontreeselect"
      >行政区划树</el-button>
      <el-button
        size="small"
        @click="regionclassselect"
      >区域选择</el-button>
    </el-button-group>
    <div
      class="regiontree-box"
      v-show="regiontreeboxVisible"
    >
      <div>
        <el-tree
          ref="regiontree"
          :props="regiontreeprops"
          :data="RegionTreeData"
          lazy
          node-key="code"
          show-checkbox
          check-strictly
          @check-change="handleCheckChange"
          @node-expand="expandRegionTree"
        ></el-tree>
        <div class="selected-region-box">
          <p>选中区域：</p>
          <el-button-group>
            <el-button  icon="el-icon-location" @click="getAlltag" size="mini">定位</el-button>
            <el-button  icon="el-icon-delete" @click="cleartag" size="mini">清空</el-button>
          </el-button-group>
        </div>
        <div class="tag-box">
          <el-tag
            v-for="tag in tagsdata"
            :key="tag.origin_code"
            closable
            :disable-transitions="false"
            size="small"
            @close="closetag(tag)"
          >{{tag.shortName||tag.name}}</el-tag>
        </div>
      </div>
    </div>
    <div
      class="regionselect-box region-select-box"
      v-show="regionselectVisible"
    >
      <el-autocomplete
        v-model="searchvalue"
        :fetch-suggestions="getRegionList"
        placeholder="请输入内容"
        @select="handleSelect"
        size="mini"
        :trigger-on-focus = false
      ></el-autocomplete>
      <div class="regiontype-box">
        <el-tabs v-model="regiontypeactiveName" @tab-click="regiontypehandleClick">
          <el-tab-pane
            size="mini"
            v-for="item in regiontypedata"
            :label="item.message"
            :key="item.code"
          >
            <div class="type-content">
              <ul class="type-title-box">
                <li
                  v-for="child in item.resultData"
                  :key="child.id"
                  :data-id="child.id"
                >
                  <span
                    class="bold"
                    :data-id="child.id"
                    :data-rcid="child.rcid"
                    data-code
                    @click="selectedAllChildRegion(item.resultData,child)"
                  >{{child.name}}</span>
                  <div :class="child.id"></div>
                </li>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="selected-region-box">
        <p>选中区域：</p>
        <el-button-group>
          <el-button icon="el-icon-location" @click="getAlltag" size="mini">定位</el-button>
          <el-button icon="el-icon-delete" @click="cleartag" size="mini">清空</el-button>
        </el-button-group>
      </div>
      <div class="tag-box">
        <el-tag
          v-for="tag in tagsdata"
          :key="tag.origin_code"
          closable
          :disable-transitions="false"
          size="small"
          @close="closetag(tag)"
        >{{tag.shortName}}</el-tag>
      </div>
    </div>
  </div>
</template>

<script>
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
import sgisRegionBase from "@/utils/map/sfgis.region.base.js";
import mapTool from "@/utils/map/sfgis.map.tool.js";
import Layer from "@/utils/map/lib/main.js";
import { mapState, mapMutations } from "vuex";
import { runInThisContext } from "vm";
import axios from 'axios';
import authority from "static/js/authority.js";
import regionUrl from "static/config/region.js";
export default {
  name: "RegionPanel",
  props: ["panelstatus"],
  data() {
    return {
      Authorization: null, // 权限token
      rcid: config.regions.rcid, // 区划版本配置
      activeName: "regionTree", // 面板默认选中
      tagsdata: [], // 存储选中的区划标签 默认显示全国
      searchvalue: "", // 区划选择输入框值
      regiontypeactiveName: "", // 区域选择大类默认选中项
      regiontypedata: [], // 存储区划分类数据
      regiontreeprops: {
        // 区划树属性
        label: "name",
        children: "children"
      },
      regiontreeboxVisible: true, // 行政区划树内容
      regionselectVisible: false, // 区域选择内容

      RegionTreeData: [], // 区划树数据
      isFirstRenderRegionClass: true,// 是否初始渲染区划子类
      checkedRegionLevel:3,
      timeout:  null
    };
  },
  computed: {
    ...mapState({
      currQuotaGroups: state => state.spatialanalyst.currQuotaGroups,
      currQuota: state => state.spatialanalyst.currQuota
    })
  },
  mounted() {
    const that = this;
    // 获取权限方法
    const userInfo = authority.getAuthority();
    const token_type = localStorage.getExpire("token_type");
    const access_token = localStorage.getExpire("access_token");

    if (userInfo && token_type && access_token) {
      that.Authorization = token_type + " " + access_token;
      // 获取用户id
      var user = localStorage.getExpire("userInfo");
      const userid = (JSON.parse(user)).sysUser.userId;
      // 根据用户id获取用户区划信息
      axios.get(config.loginUrl.userRegion + "?user_id=" + userid, {
        headers:{
          'Authorization': token_type + " " + access_token
        }
      }).then(response => {
        if(response.status === 200){
          const data = response.data.data;
          const regionData = data[0];
          // 查询区划对应详细信息
          const regionReq = {
            rcId: regionData.rcid,
            regionCode: regionData.regionCode,
            regionCodeType: ""
          };
          const regionLevel = sgisRegionBase.regionUtils.getRegionLevel(regionData.regionCode);
          sgisRegionBase.regionInfos.setMaxLevel(regionLevel);
          // 获取当前区划
          const param = {
            regionCode: regionData.regionCode,
            rcid: regionData.rcid
          };
          axios.get(regionUrl.class.getRegionSelf, {
            params: param,
            headers: {
              'Authorization': token_type + " " + access_token
            }
          }).then(response => {
            if (response.status === 200) {
              let regionSelf = response.data.data;
              if(regionSelf === null){
                return;
              }else{
                let rgData = {
                  code: regionSelf.code,
                  id: regionSelf.id,
                  memo: regionSelf.memo,
                  name: regionSelf.name,
                  originCode: regionSelf.originCode,
                  originName: regionSelf.originCode,
                  parCode: regionSelf.parCode,
                  parCodeName: "",
                  rcid: regionSelf.rcid,
                  regionCodeType: regionSelf.regionCodeType,
                  ruralProperty: regionSelf.ruralProperty,
                  shortName: regionSelf.shortName,
                  urcCode: regionSelf.urcCode,
                  version: regionSelf.version,
                  villageProperty: regionSelf.villageProperty,
                  x: regionSelf.x,
                  y: regionSelf.y
                };
                rgData.children = [];
                that.RegionTreeData =  [rgData];
                // 用户区划可能为多个，现在只做了一个用户对应一个区划
                sgisRegionBase.regionInfos.setMaxRegionInfo([rgData]);
              }
            }
          }).catch(error => {
            console.log(error);
          });
          // that.getRegionTreeData(regionReq, data => {
          //   if (data[0].code == "000000000000") {
          //     data[0].disabled = true;
          //   }
          //   that.RegionTreeData = data;
          // });
          that.getRegionType(); // 获取区划选择大类
        }
      }).catch(error => {
        console.log(error);
      });
    }
    EventBus.$on("changeToolRegion", this.changeToolRegion);
    EventBus.$on("initRegion", this.initRegion);
    EventBus.$on("onlyUpdateRegion", this.onlyUpdateRegion);
  },
  beforeDestroy() {
    EventBus.$off("initRegion", this.initRegion);
    EventBus.$off("changeToolRegion", this.changeToolRegion);
    EventBus.$off("onlyUpdateRegion", this.onlyUpdateRegion);
  },
  methods: {
    ...mapMutations([
      "changeDataPanelTitle",
      "changeRegionCodeMapNames",
      "updataQuota",
      "changeShowGroupPanel",
      "changeCurrQuotaGroups"
    ]),
    // 切换到行政区划
    regiontreeselect() {
      if(this.activeName != "regionTree"){
        this.activeName = "regionTree";
        this.tagsdata = []; // 每次切换面板类型，都清空选中地区，防止相互影响
        this.regiontreeboxVisible = true; // 行政区划树内容
        this.regionselectVisible = false; // 区域选择内容
      }
    },
    // 切换到区划类型选择
    regionclassselect() {
      if(this.activeName != "regionClass"){
        this.activeName = "regionClass";
        this.tagsdata = []; // 每次切换面板类型，都清空选中地区，防止相互影响
        this.regiontreeboxVisible = false; // 行政区划树内容
        this.regionselectVisible = true; // 区域选择内容
        this.isFirstRenderRegionClass = true;
      }
    },
    // 每次切换选中时更新下边的选中标签
    handleCheckChange(data, checked, indeterminate) {
      const self = this;
      if(data.code.indexOf("all") == -1){//不是全选项
        let checkedNodes = this.$refs.regiontree.getCheckedNodes();
        let arr = []
        if(checkedNodes.length){
          checkedNodes.map(item=>{
            if(item.code.indexOf("all") == -1){
              arr.push(item)
            }
          })
        }
        self.tagsdata = arr;//防止切换造成没有数据，不能及时判断是否是同一级别
        if(checked){
          if (self.tagsdata.length) {
            self.tagsdata.map(tag => {
              if (tag.regionLevel != data.regionLevel) {//级别不一致
                self.$refs.regiontree.setCheckedNodes([]);//先清空树
                self.$refs.regiontree.setChecked(data,true,null)
              }
            });
          }
          let arr = []
          if(checkedNodes.length){
            checkedNodes.map(item=>{
              if(item.code.indexOf("all") == -1){
                arr.push(item)
              }
            })
          }
          self.tagsdata = arr;
        }else{
          let arr = []
          if(checkedNodes.length){
            checkedNodes.map(item=>{
              if(item.code.indexOf("all") == -1){
                arr.push(item)
              }
            })
          }
          self.tagsdata = arr;
        }
      }else{//是全选项
        let checkedNodes = this.$refs.regiontree.getCheckedNodes();
        if(checked){
          let regionLevel = sgisRegionBase.regionUtils.getRegionLevel(data.parCode);
          checkedNodes.map(node=>{
             let nodeLevel = sgisRegionBase.regionUtils.getRegionLevel(node.parCode);
              if(regionLevel!=nodeLevel){//等级不一致，直接先清空树
                this.$refs.regiontree.setCheckedNodes([]);
              }
          });
          this.$refs.regiontree.setChecked(data.code,true,null)
          let parentData = this.getAllRegion(this.RegionTreeData,data.parCode)
          if(parentData.children.length){
            parentData.children.map(item=>{
              this.$refs.regiontree.setChecked(item.code,true,null)
            })
          }
        }else{
          checkedNodes.map(node => {
            if (node.parCode == data.parCode) {
              self.$refs.regiontree.setChecked(node, false, null);
            }
          });
        }
      }
    },
    //获取当前选中区划等级所有区划
    getAllRegion(data,parentCode){
      let parentData = {}
      if(data.length){
        data.map(item=>{
          if( parentData.hasOwnProperty('originCode')){
            return;
          }
          if(item && item.code.indexOf("all") == -1){
            if(item.originCode == parentCode){
              parentData = item
              return
            }else{
              parentData = this.getAllRegion(item.children,parentCode)
            }
          }
        })
      }
      return parentData
    },
    // 获取区划树数据
    getRegionTreeData(req, callback) {
      const that = this;
      axios.get(regionUrl.getRegionTree, {
        params: req,
        headers: {
          'Authorization': that.Authorization
        }
      })
        .then(response => {
          if (response.status == 200) {
            const data = response.data.data;
            let regionLevel = sgisRegionBase.regionUtils.getRegionLevel(req.regionCode)
            switch (regionLevel) {
              case 2:
                data.unshift({name:"选中所有市",code:"all3-"+req.regionCode,regionLevel:3,parCode:req.regionCode})
                break;
              case 3:
                data.unshift({name:"选中所有区县",code:"all4-"+req.regionCode,regionLevel:4,parCode:req.regionCode})
                break;
              case 4:
                data.unshift({name:"选中所有镇",code:"all5-"+req.regionCode,regionLevel:5,parCode:req.regionCode})
                break;
              case 5:
                data.unshift({name:"选中所有村(居委会)",code:"all6-"+req.regionCode,regionLevel:6,parCode:req.regionCode})
                break;
              case 6:
                data.unshift({name:"选中所有普查小区",code:"all7-"+req.regionCode,regionLevel:7,parCode:req.regionCode})
                break;
              default:
                break;
            }
            for (const i in data) {
              data[i].children = [];
              if(data[i].code != "all"){
                data[i].regionCode = data[i].code;
                data[i].regionLevel = sgisRegionBase.regionUtils.getRegionLevel(data[i].code);
              }
            }
            callback(data);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    expandRegionTree(node, nodeobj, resolve) {
      if (node.children.length < 1) {
        const req = {
          rcId: config.regions.rcid,
          regionCode: node.code,
          regionCodeType: ""
        };
        this.getRegionTreeData(req, data => {
          node.children = data;
        });
      }
    },
    // 删除选中的区划标签
    closetag(tag) {
      const that = this;
      if (that.activeName == "regionTree") { // 区划树
        for (let i = 0; i < this.tagsdata.length; i++) {
          if (tag.regionCode == this.tagsdata[i].regionCode) {
            that.$refs.regiontree.setChecked(this.tagsdata[i], false, null);
            let arr = []
            if(that.$refs.regiontree.getCheckedNodes().length){
              that.$refs.regiontree.getCheckedNodes().map(item=>{
                if(item.code.indexOf("all") == -1){
                  arr.push(item)
                }
              })
            }else{
              arr=[]
            }
            that.tagsdata = arr;
            break;
          }
        }
      } else { // 区域选择
        that.tagsdata.map((item, index) => {
          if ((item.regionCode || item.code) == (tag.regionCode || tag.code)) {
            $("." + item.id).removeClass("active");
            that.tagsdata.splice(index, 1);
          }
        });
      }
    },
    // 清空所有的选中标签
    cleartag() {
      const that = this;
      if (that.activeName == "regionTree") { // 区划树
        this.$refs.regiontree.setCheckedNodes([]);
        this.tagsdata = this.$refs.regiontree.getCheckedNodes();
      } else { // 区域选择
        const len = that.tagsdata.length;
        for (let i = len - 1; i > -1; i--) {
          $("." + that.tagsdata[i].id).removeClass("active");
          that.tagsdata.splice(i, 1);
        }
      }
      const currentRegion = document.getElementById("region-name");
      currentRegion.textContent = "";
      mapTool.clearDrawFeatures();
      EventBus.$emit("updateRegions", this.tagsdata); // 发送给基层查询页
    },
    // 清空所有的选中标签(不发送给基层)
    cleartag_notUpdateRegions(type){
      const that = this;
      if (that.activeName == "regionTree") { // 区划树
        this.$refs.regiontree.setCheckedNodes([]);
        this.tagsdata = this.$refs.regiontree.getCheckedNodes();
      } else { // 区域选择
        const len = that.tagsdata.length;
        for (let i = len - 1; i > -1; i--) {
          $("." + that.tagsdata[i].id).removeClass("active");
          that.tagsdata.splice(i, 1);
        }
      }
      if(type!="spatialQuery"&&type!="bufferQuery"){
        mapTool.clearDrawFeatures();
      }
    },
    // 定位所有的选中标签
    getAlltag() {
      const that = this;
      if (that.activeName == "regionTree") { // 区划树
        const tagsdata = []
          if(that.$refs.regiontree.getCheckedNodes().length){
            that.$refs.regiontree.getCheckedNodes().map(item=>{
              if(item.code.indexOf("all") == -1){
                tagsdata.push(item)
              }
            })
          }
        if (tagsdata.length > 0) { // 区划树有选中用区划树，否则用空间查询传递过来的区划
          that.tagsdata = tagsdata;
        }
      } else { // 区划分类
        // that.tagsdata = [];
        const tags = $(".type-content .type-title-box div span.active");
        for (let i = 0; i < tags.length; i++) {
          const dataid = $(tags[i]).attr("data-id");
          const datacode = $(tags[i]).attr("data-code");
          const datarcid = $(tags[i]).attr("data-rcid");
          const parid = $(tags[i]).attr("parid");
          that.tagsdata.push({// 组装选中项
            id: dataid,
            code: datacode,
            rcid: datarcid,
            parid,
            shortName: $(tags[i]).text(),
            name: $(tags[i]).text()
          });
        }
      }
      // 当前建筑物为点数据，没有面，所以暂时随机定位到当前选中的建筑物的某一个点
      const currentRegion = document.getElementById("region-name");
      if (that.tagsdata.length > 0) {
        if (that.tagsdata.length > 1) {
          currentRegion.textContent = that.tagsdata[0].shortName + "等";
        } else {
          currentRegion.textContent = that.tagsdata[0].shortName;
        }
        mapTool.clearDrawFeatures();
        that.updateMapView(that.tagsdata);
        EventBus.$emit("updateRegions", this.tagsdata); // 发送给基层查询页
        that.$emit("screenRegionPanel");
      } else {
        that.$message({
          message: "请先选择区划",
          type: 'warning'
        });
        currentRegion.textContent = "";
      }
    },
    // 区划选择类型切换
    regiontypehandleClick(tab, event) {
      if (this.regiontypedata.length > 0 && this.regiontypeactiveName != "") {
        const params = {
          region_class: this.regiontypedata[this.regiontypeactiveName].value
        };
      }
      this.isFirstRenderRegionClass = true;// 初始渲染区划子类
    },
    // 获取区划选择大类
    getRegionType() {
      const that = this;
      const req = {
        rcid: ''
      };
      axios.get(regionUrl.class.queryClass, {
        params: req,
        headers: {
          'Authorization': that.Authorization
        }
      })
        .then(response => {
          if (response.status == 200 && response.data.message == "success") {
            that.regiontypedata = response.data.data;
            for (const i in that.regiontypedata) {
              const resultData = that.regiontypedata[i].resultData;
              for (const j in resultData) {
                that.getRegionRinfo(resultData[j], j, resultData.length);
              }
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 根据区划大类标题查询关联区划
    getRegionRinfo(child, index, len) {
      const that = this;
      const req = {
        recid: child.id
      };
      axios.get(regionUrl.class.getSelectRinfo, {
        params: req,
        headers: {
          'Authorization': that.Authorization
        }
      })
        .then(response => {
          if (response.status == 200 && response.data.message == "success") {
            const datas = response.data.data;
            let spanBox = "";
            for (const j in datas) {
              const item =
                "<span data-id='" +
                datas[j].id +
                "' class='" +
                datas[j].id +
                 "' parid='" +
                child.id +
                "' data-code='" +
                datas[j].code +
                "' data-rcid='" +
                datas[j].rcid +
                "' >" +
                (datas[j].shortName || datas[j].name) +
                "</span>";
              spanBox += item;
            }
            $("." + child.id).html(spanBox);
            that.onclickspan(child.id);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 点击具体的区划事件
    onclickspan(classname) {
      const that = this;
      $("." + classname + " span").on("click", function(e) {
        if ($(this).hasClass("active")) {
          $(this).removeClass("active");
          const dataid = $(this).attr("data-id");
          for (let i = 0; i < that.tagsdata.length; i++) {
            if (that.tagsdata[i].id == dataid) {
              that.tagsdata.splice(i, 1);
            }
          }
        } else {
          // 先获取上次记录
          that.tagsdata = [];
          const tags = $(".type-content .type-title-box div span.active");
          for (let i = 0; i < tags.length; i++) {
            const dataid = $(tags[i]).attr("data-id");
            const datacode = $(tags[i]).attr("data-code");
            const datarcid = $(tags[i]).attr("data-rcid");
            const parid = $(tags[i]).attr("parid");
            that.tagsdata.push({// 组装选中项
              id: dataid,
              code: datacode,
              rcid: datarcid,
              parid,
              shortName: $(tags[i]).text(),
              name: $(tags[i]).text()
            });
          }

          const dataid = $(this).attr("data-id");
          const datacode = $(this).attr("data-code");
          const datarcid = $(this).attr("data-rcid");
          const parid = $(this).attr("parid");
          if (that.tagsdata.length > 0) { // 只能选择同类区域
            if (that.tagsdata[0].parid != parid) { // 先清空上次选择
              const len = that.tagsdata.length;
              for (let i = len - 1; i > -1; i--) {
                $("." + that.tagsdata[i].id).removeClass("active");
                that.tagsdata.splice(i, 1);
              }
            }
          }
          $(this).addClass("active");
          for (let i = 0; i < that.tagsdata.length; i++) {
            if (that.tagsdata[i].id == dataid) { // 已经选择不重复添加
              return;
            }
          }
          that.tagsdata.push({// 组装选中项
            id: dataid,
            code: datacode,
            rcid: datarcid,
            parid,
            shortName: $(this).text(),
            name: $(this).text()
          });
        }
      });
    },
    // 选择该大类下的所有区划
    selectedAllChildRegion(allType, child) {
      const that = this;
      that.tagsdata = [];// 只能选择同类区域

      const arr = $(".type-content .type-title-box div span");
      for (let i = 0; i < arr.length; i++) { // 取消其他选中项
        if ($(arr[i]).hasClass("active")) {
          $(arr[i]).removeClass("active");
        }
      }

      $("." + child.id + " span").click();// 选中该类下的区划
    },
    // 搜索
    searchRegion() {
      console.log("输入框的值是:", this.searchvalue);
    },
    // 初始化区划(暂时先复制changeToolRegion，后面再改)
    initRegion(regions){
      const self = this;
      const treeRegions = self.$refs.regiontree.getCheckedNodes();
      if (treeRegions.length > 0) {
        self.cleartag();
      }
      regions.map(region => {
        const node = {
          id: region.id,
          code: region.code || region.regioncode,
          regionCode: region.code || region.regioncode,
          rcid: region.rcid,
          shortName: region.name || region.regionname
        };
        self.$refs.regiontree.setChecked(node, true, false);
      });
      // 添加高亮图层及蒙版
      self.updateMapView(regions, true)
      setTimeout(() => {
        if (self.tagsdata.length != 0) {
          self.tagsdata = [];
        }
        regions.map(region => {
          self.tagsdata.push({
            // origin_code: region.code||region.regioncode,
            id: region.id,
            code: region.code || region.regioncode,
            regionCode: region.code || region.regioncode || region.regionCode,
            rcid: region.rcid,
            shortName: region.name || region.regionname
          });
        });

        const currentRegion = document.getElementById("region-name");
        if (self.tagsdata.length > 0) {
          if (self.tagsdata.length > 1) {
            currentRegion.textContent = self.tagsdata[0].shortName + "等";
          } else {
            currentRegion.textContent = self.tagsdata[0].shortName || arr[0].name;
          }
        } else {
          currentRegion.textContent = "";
        }
        EventBus.$emit("updateRegions", self.tagsdata); // 发送给基层查询页
      }, 100);
    },
    // 更新工具区划数据标题和选中区划
    changeToolRegion(regions,type) {
      let _this = this;
      const self = this;
      // const treeRegions = self.$refs.regiontree.getCheckedNodes();
      // if (treeRegions.length > 0) {
      //   self.cleartag_notUpdateRegions();
      // }
      self.cleartag_notUpdateRegions(type);
      regions.map(region => {
        const node = {
          id: region.id,
          code: region.code || region.regioncode,
          regionCode: region.code || region.regioncode,
          rcid: region.rcid,
          shortName: region.name || region.regionname
        };
        self.$refs.regiontree.setChecked(node, true, false);
      });
      // 添加高亮图层及蒙版，需要判断一下当前的查询是不是建筑物，建筑物的话现在没有面数据，直接不更新高亮
      console.log("##建筑物不添加高亮###");
      if(regions.length > 0){
        if(regions[0].rname === undefined || !(regions[0].rname.indexOf("ST_P_BU")===0)){
          _this.updateMapView(regions, false)
        }
      }
      setTimeout(() => {
        if (self.tagsdata.length != 0) {
          self.tagsdata = [];
        }
        regions.map(region => {
          self.tagsdata.push({
            // origin_code: region.code||region.regioncode,
            id: region.id,
            code: region.code || region.regioncode,
            regionCode: region.code || region.regioncode || region.regionCode,
            rcid: region.rcid,
            shortName: region.name || region.regionname
          });
        });

        const currentRegion = document.getElementById("region-name");
        if (self.tagsdata.length > 0) {
          if (self.tagsdata.length > 1) {
            currentRegion.textContent = self.tagsdata[0].shortName + "等";
          } else {
            currentRegion.textContent = self.tagsdata[0].shortName || self.tagsdata[0].name;
          }
        } else {
          currentRegion.textContent = "";
        }
        EventBus.$emit("updateRegions", self.tagsdata,type); // 发送给基层查询页
      }, 100);
    },
    //只更新区划，不做其他操作
    onlyUpdateRegion(regions){
      const self = this;
      self.cleartag_notUpdateRegions();
      regions.map(region => {
        const node = {
          id: region.id,
          code: region.code || region.regioncode,
          regionCode: region.code || region.regioncode,
          rcid: region.rcid,
          shortName: region.name || region.regionname||region.shortName
        };
        self.$refs.regiontree.setChecked(node, true, false);
      });
      // 添加高亮图层及蒙版，需要判断一下当前的查询是不是建筑物，建筑物的话现在没有面数据，直接不更新高亮
      console.log("##建筑物不添加高亮###");
      if(regions.length > 0){
        if(regions[0].rname === undefined || !(regions[0].rname.indexOf("ST_P_BU")===0)){
          self.updateMapView(regions, false)
        }
      }
      setTimeout(() => {
        if (self.tagsdata.length != 0) {
          self.tagsdata = [];
        }
        regions.map(region => {
          self.tagsdata.push({
            // origin_code: region.code||region.regioncode,
            id: region.id,
            code: region.code || region.regioncode,
            regionCode: region.code || region.regioncode || region.regionCode,
            rcid: region.rcid,
            shortName: region.name || region.regionname||region.shortName
          });
        });

        const currentRegion = document.getElementById("region-name");
        if (self.tagsdata.length > 0) {
          if (self.tagsdata.length > 1) {
            currentRegion.textContent = self.tagsdata[0].shortName + "等";
          } else {
            currentRegion.textContent = self.tagsdata[0].shortName || self.tagsdata[0].name;
          }
        } else {
          currentRegion.textContent = "";
        }
      }, 100);
    },
    /**
     * 添加高亮图层及蒙版
     * @param tagsdata 区划数据
     * @param hasMaskBoundary 是否添加蒙版
     */
    // eslint-disable-next-line no-dupe-keys
    updateMapView(tagsdata, hasMaskBoundary) {
      const viewArr = [];
      const haschild = false;// 是否有下级（这里选择的是同一级别的区划）
      for (let i = 0; i < tagsdata.length; i++) {
        const level = sgisRegionBase.regionUtils.getRegionLevel(tagsdata[i].code||tagsdata[i].regionCode||tagsdata[i].regioncode);
        const dataSetName = sgisRegionBase.regionUtils.getDataSetNameByRegionLevel(level);
        viewArr.push({
          id: tagsdata[i].code,
          regioncode: tagsdata[i].code||tagsdata[i].regionCode||tagsdata[i].regioncode,
          regionname: tagsdata[i].name,
          regiontype: "1", // 1普通区划 2高新区 3特色区
          regionlevel: level,
          lat: "",
          lon: "",
          rname: dataSetName,
          pname: dataSetName
        });
      }
      // 建筑物没有面，所以此处定位到点就可以，默认定位到建筑物的第一个点
      if(viewArr[0].regionlevel>7){
        // todo 此处获取坐标或者获取绘制的面
      }else{
        Layer.hlLayer.addHLBoundary(viewArr, "1", sgisMapBase.getMap(), haschild, hasMaskBoundary);
      }
    },
    //区划搜索框
    getRegionList(queryString, cb){
      if(queryString){
        let req = {
          rcid:this.rcid,
          regionName:this.searchvalue
        }
        axios.get(regionUrl.class.getRegionByName,{
          params:req
        }).then(res=>{
          let data = res.data.data
          if(data.length){
            data.map(item=>{
              item.value = item.name
              return item
            })
          }
          setTimeout(() => {
            cb(data);
          }, 500);
        })
      }
    },
    handleSelect(item){
      this.tagsdata = []
      item.regionCode = item.code;
      item.regionLevel = sgisRegionBase.regionUtils.getRegionLevel(item.code);
      this.tagsdata.push(item)
    }
  }
};
</script>

<style rel='stylesheet/scss' lang='scss' >
@import "./../../assets/css/rule.scss";
$themacolor: rgba(46,218,255,1);
$bordercolor: #d2d2d2;
.region-panel-temp {
  .el-button-group{
    .el-button{
      border: 1px solid rgba(255,255,255,0.1);
      background: none;
      color: $fontColorW;
    }
    .el-button:hover,.el-button:active{
      background:rgba(39,134,158,1);
    }
  }
  button{
    width: auto;
    height: auto;
    float: left;
  }
  .regiontree-box {
    .el-tree {
      margin-top: 8px;
      margin-bottom: 8px;
      .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: $themacolor;
        border-color: $themacolor;
      }
      .el-checkbox__inner:hover {
        border-color: $themacolor;
      }
    }
    .el-tree-node:focus>.el-tree-node__content{
      background-color: #f5f7fa00;
    }
    .el-tree-node__content:hover {
      background-color: $colorBackgroundActive;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color: rgba(29,156,183,1)!important;
      border-color: rgba(255,255,255,0.2)!important;
    }
    .el-checkbox__inner{
      background-color: #fff0;
    }
  }

  .selected-region-box {
    width: 100%;
    padding-top: 16px;
    border-top: 1px solid #ddd;
    display: inline-block;
    .hascolor {
      color: $themacolor;
      cursor: pointer;
      text-align: left;
      float: left;
    }
  }
  .hascolor {
    color: $themacolor;
    cursor: pointer;
    text-align: left;
    float: left;
  }
  p {
    font-size: 1.4rem;
    padding-left: 10px;
    float: left;
    height: 28px;
    line-height: 28px;
    color:$fontColorLimit;
  }
  i {
    margin: 0 5px;
    cursor: pointer;
  }
  .tag-box {
    padding: 10px;
    height: 100px;
    overflow: auto;
    display: inline-block;
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
    overflow-x: hidden;
    .el-tag {
      color: rgba(46,218,255,1);
      background-color: rgba(39,134,158,0.3);
      margin-right: 5px;
      margin-bottom: 5px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .el-tag__close {
        color: rgba(46,218,255,1);
    }
    .el-icon-close:hover {
      background-color: $themacolor;
    }
  }
  .region-select-box {
    //区域选择
    margin-top: 10px;
    .el-autocomplete{
      .el-input__inner{
        background: none;
      }
    }
    .type-content {
      height: 145px;
      overflow: auto;
      .type-title-box {
        font-size: 1.4rem;
        li{
          display: inline-block;
          width: 100%;
          margin-bottom: 10px;
          color: $fontColorLimit;
        }
        span {
          font-size: 1.4rem;
          cursor: pointer;
          margin-right: 8px;
          font-weight: normal;
          padding: 4px;
          line-height: 1;
        }
        span.bold {
          font-weight: bold;
          float:left;
        }
        div{
          float:left;
          margin-left: 10px;
          span{
            font-size: 1rem;
            padding: 4px;
            line-height: 2;
          }
          span.active{
             background: $themacolor;
            color: #fff;
            border-radius: 2px;
          }
        }

      }
    }
    .regiontype-box {
      height: 190px;
    }
    .el-tabs__item{
      color:$fontColorLimit;
    }
    .el-tabs__item.is-active {
      color:rgba(46,218,255,1);
    }
    .el-tabs__active-bar {
      background-color: rgba(46,218,255,1);
    }
    .el-tabs__item:hover {
      color: $themacolor;
    }
    .selected-region-box {
      width: 100%;
      padding-top: 16px;
      border-top: 1px solid #ddd;
      display: inline-block;
      .hascolor {
        color: $themacolor;
        cursor: pointer;
        text-align: left;
        float: left;
      }
    }
    .hascolor {
      color: $themacolor;
      cursor: pointer;
      text-align: left;
      float: left;
    }
    p {
      font-size: 1.4rem;
      padding-left: 10px;
      float: left;
      height: 28px;
      line-height: 28px;
    }
    i {
      margin: 0 5px;
      cursor: pointer;
    }
  }
}
.regionselect-box{
  .el-autocomplete{
      width:100%;
    }
  .el-input--small .el-input__inner{
    background: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.8);
  }
  input{
    color: rgba(255, 255, 255, 0.8);
  }
}
.el-scrollbar{
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(23, 128, 154, 0.8);
    border-radius: 0 0 4px 4px;
    color: #fff;
}
.el-autocomplete-suggestion li{
  color: #fff;
}
.el-autocomplete-suggestion{
  border:none;
}
.el-autocomplete-suggestion li:hover{
  background: rgba(23, 128, 154, 0.8);
}
.el-autocomplete-suggestion.is-loading li:hover{
  background: transparent;
}
.el-autocomplete-suggestion.is-loading .el-icon-loading{
   color: #0c4764;
}
</style>
<style rel='stylesheet/scss' lang='scss' scoped>
@import "./../../assets/css/icon-font/iconfont.css";
@import "./../../assets/css/rule.scss";
$backColorBottom: #409EFF;
.region-panel-temp {
  width: 315px;
  height: 430px;
  background: $panelContentBg;
  margin-top: 2px;
  border-radius: 1px;
  padding: 9px 11px;
  position: absolute;
  left:0;
  z-index: 1100;
  .checkbox {
    margin-top: 9px;
  }
  .el-tree {
    width: 100%;
    height: 200px;
    overflow: auto;
    background: none;
    color: $fontColorLimit;
  }
}
</style>
